<script setup lang="ts">
import { reactive, ref } from "vue";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import {
  get_h5_status_api,
  info_api,
} from "@/package/guider/api/new_guide_certification";
import { Router } from "@/utils/router";

import PageSticky from "@/components/page/sticky.vue";
import DetailTabItem from "./components/detail-tab-item.vue";
import EditMenuTitle from "./components/edit-menu-title.vue";
import DetailCertificateInfo from "./components/detail-certificate-info.vue";
import DetailImgList from "./components/detail-img-list.vue";
import FormButton from "@/components/form/button.vue";

const ev_apply = "ev-apply";

onLoad(() => {
  reloadTabData().then(() => {
    const index = tabList.value.findIndex((i) => i.state === 2);
    tabIndex.value = index === -1 ? 0 : index;
    reloadData();
  });

  uni.$on(ev_apply, evApplyCallback);
});
onUnload(() => uni.$off(ev_apply, evApplyCallback));

const reloadTabData = () => {
  return get_h5_status_api().then((resp) => {
    const _tabList: any[] = [];
    let item = resp.certification_types.find((i) => i.id === 1);
    _tabList.push({ id: 1, name: "持证导游", state: item.status });
    item = resp.certification_types.find((i) => i.id === 2);
    _tabList.push({ id: 2, name: "非·持证导游", state: item.status });
    item = resp.certification_types.find((i) => i.id === 3);
    _tabList.push({ id: 3, name: "海外导游", state: item.status });
    item = resp.certification_types.find((i) => i.id === 4);
    _tabList.push({ id: 4, name: "考生", state: item.status });
    tabList.value = _tabList;
  });
};

const reloadData = () => {
  const tab = tabList.value[tabIndex.value];
  const type = tab.id;
  return info_api({ type }).then((resp) => {
    infoData.type = type;
    infoData.status = tab.state;
    if (resp) {
      infoData.op_remark = resp.op_remark;
      infoData.avatar_url = resp.avatar_url;
      infoData.name = resp.name;
      infoData.card_type = resp.card_type;
      infoData.card_type_str = resp.card_type_str;
      infoData.card_no = resp.card_no;
      infoData.gender = resp.gender;
      infoData.phone = resp.phone;
      infoData.city_id = resp.city_id;
      infoData.city_name = resp.city_name;
      infoData.identity_type = resp.identity_type || [];
      infoData.identity_type_name = resp.identity_type_name || [];
      infoData.guider_date = resp.guider_date;
      infoData.guider_no = resp.guider_no;
      infoData.guider_level = resp.guider_level;
      infoData.guider_level_name = resp.guider_level_name;
      infoData.guider_pic = resp.guider_pic;
      infoData.language_arr = resp.language_arr;
      infoData.language_name_arr = resp.language_name_arr;
      infoData.tutor_no = resp.tutor_no;
      infoData.tutor_date = resp.tutor_date;
      infoData.tutor_pics = resp.tutor_pics || [];
      infoData.leader_no = resp.leader_no;
      infoData.leader_date = resp.leader_date;
      infoData.leader_pics = resp.leader_pics || [];
      infoData.prove_img = resp.prove_img || [];
      infoData.honor_img = resp.honor_img || [];
      infoData.card_valid_date = resp.card_valid_date;
      infoData.wechat = resp.wechat;
      infoData.card_pics = resp.card_pics || [];
      infoData.remark = resp.remark;
    }
  });
};

const tabIndex = ref(-1);
const tabList = ref<any[]>([]);
const tabClick = (index: number) => {
  tabIndex.value = index;
  reloadData();
};

const infoData = reactive({
  type: 1,
  status: -1,
  op_remark: "",
  avatar_url: "",
  name: "",
  card_type: 1,
  card_type_str: "",
  card_no: "",
  gender: 1,
  phone: "",
  city_id: "",
  city_name: "",
  identity_type: [] as number[],
  identity_type_name: [] as string[],
  guider_date: "",
  guider_no: "",
  guider_level: 1,
  guider_level_name: "",
  guider_pic: "",
  language_arr: "",
  language_name_arr: "",
  tutor_no: "",
  tutor_date: "",
  tutor_pics: [] as string[],
  leader_no: "",
  leader_date: "",
  leader_pics: [] as string[],
  prove_img: [] as string[],
  honor_img: [] as string[],
  card_valid_date: "",
  wechat: "",
  card_pics: [] as string[],
  remark: "",
});

const applyClick = () => {
  Router.navigateTo(`/package/guider/pages/apply/edit?type=${infoData.type}`);
};
const editClick = () => {
  Router.navigateTo(`/package/guider/pages/apply/edit?type=${infoData.type}`);
};

const evApplyCallback = () => {
  console.info(`触发事件：${ev_apply}`);
  reloadTabData().then(() => {
    const index = tabList.value.findIndex((i) => i.state === 2);
    tabIndex.value = index === -1 ? 0 : index;
    reloadData();
  });
};
</script>

<template>
  <PageSticky>
    <view class="detail-tab">
      <view
        class="detail-tab-item"
        v-for="(i, d) of tabList"
        :key="i.id"
        @click="tabClick(d)"
      >
        <DetailTabItem
          :text="i.name"
          :isActive="tabIndex === d"
          :isCertificate="i.state === 1"
        />
      </view>
    </view>
  </PageSticky>

  <view class="detail-empty" v-if="infoData.status === -1">
    <image
      class="detail-empty-img"
      src="@/package/guider/static/apply-detail-empty.png"
    />
    <view class="detail-empty-tip">
      您还未认证{{ tabIndex === -1 ? "" : tabList[tabIndex].name }}
    </view>
    <view class="detail-empty-btn" @click="applyClick">去认证</view>
  </view>
  <template v-else>
    <view class="detail-state">
      <view style="display: flex; align-items: center">
        <view class="detail-state-label">认证状态</view>
        <view
          class="detail-state-value"
          :style="{
            background:
              infoData.status === 2
                ? 'linear-gradient(90deg, #fe6e59, #ff3a3a 98%)'
                : infoData.status === 1
                ? 'linear-gradient(90deg, #03c8cc, #0ad388)'
                : 'linear-gradient(90deg, #ff8d28, #f9b000)',
          }"
        >
          {{
            infoData.status === 2
              ? "审核不通过"
              : infoData.status === 1
              ? "已认证"
              : "审核中"
          }}
        </view>
      </view>
      <view class="detail-state-item" v-if="infoData.status === 2">
        <view class="detail-state-label2">不通过原因：</view>
        <view class="detail-state-reason">{{ infoData.op_remark }}</view>
      </view>

      <view class="detail-state-item2" v-if="infoData.type === 2">
        <view class="detail-state-label">认证身份</view>
        <view class="detail-state-identity">
          {{ infoData.identity_type_name.join("、") }}
        </view>
      </view>
    </view>

    <view class="detail-info">
      <view class="detail-info-title">
        <EditMenuTitle title="个人资料" />
      </view>
      <view class="detail-info-item">
        <view class="detail-info-label">头像</view>
        <view class="detail-info-content">
          <image
            class="detail-info-avatar"
            :src="infoData.avatar_url"
            mode="aspectFill"
          />
        </view>
      </view>
      <view class="detail-info-line"></view>
      <view class="detail-info-item">
        <view class="detail-info-label">姓名</view>
        <view class="detail-info-content">
          <view class="detail-info-value">{{ infoData.name }}</view>
        </view>
      </view>
      <view class="detail-info-line"></view>
      <template v-if="infoData.type === 1 || infoData.type === 2">
        <view class="detail-info-item">
          <view class="detail-info-label">身份证号</view>
          <view class="detail-info-content">
            <view class="detail-info-value">{{ infoData.card_no }}</view>
          </view>
        </view>
        <view class="detail-info-line"></view>
      </template>
      <template v-else-if="infoData.type === 3">
        <view class="detail-info-item">
          <view class="detail-info-label">{{ infoData.card_type_str }}</view>
          <view class="detail-info-content">
            <view class="detail-info-value">{{ infoData.card_no }}</view>
          </view>
        </view>
        <view class="detail-info-line"></view>
        <view class="detail-info-item">
          <view class="detail-info-label">证件有效期</view>
          <view class="detail-info-content">
            <view class="detail-info-value">{{
              infoData.card_valid_date
            }}</view>
          </view>
        </view>
        <view class="detail-info-line"></view>
      </template>
      <view class="detail-info-item">
        <view class="detail-info-label">性别</view>
        <view class="detail-info-content">
          <view class="detail-info-value">
            {{ infoData.gender === 1 ? "男" : "女" }}
          </view>
        </view>
      </view>
      <view class="detail-info-line"></view>
      <view class="detail-info-item">
        <view class="detail-info-label">电话</view>
        <view class="detail-info-content">
          <view class="detail-info-value">{{ infoData.phone }}</view>
        </view>
      </view>
      <view class="detail-info-line"></view>
      <template v-if="infoData.type === 3">
        <view class="detail-info-item">
          <view class="detail-info-label">社交媒体账号或邮箱</view>
          <view class="detail-info-content">
            <view class="detail-info-value">{{ infoData.wechat }}</view>
          </view>
        </view>
        <view class="detail-info-line"></view>
      </template>
      <view class="detail-info-item">
        <view class="detail-info-label">常驻地</view>
        <view class="detail-info-content">
          <view class="detail-info-value">{{ infoData.city_name }}</view>
        </view>
      </view>
      <view class="detail-info-line"></view>
    </view>
    <view class="detail-certificate" v-if="infoData.type === 1">
      <view class="detail-certificate-title">
        <EditMenuTitle title="您的身份" />
      </view>
      <view class="detail-certificate-wrapper">
        <DetailCertificateInfo
          v-if="infoData.identity_type.includes(9)"
          title="中文导游证件资料"
          :info="infoData"
        />
      </view>
      <view class="detail-certificate-wrapper">
        <DetailCertificateInfo
          v-if="infoData.identity_type.includes(10)"
          title="外文导游证件资料"
          :info="infoData"
        />
      </view>
      <view class="detail-certificate-wrapper">
        <DetailCertificateInfo
          v-if="infoData.identity_type.includes(8)"
          title="研学导师证件资料"
          :info="infoData"
        />
      </view>
      <view class="detail-certificate-wrapper">
        <DetailCertificateInfo
          v-if="infoData.identity_type.includes(11)"
          title="出境领队认证资料"
          :info="infoData"
        />
      </view>
    </view>
    <template v-else-if="infoData.type === 2">
      <DetailImgList :listData="infoData.prove_img" title="相关证明" />
      <DetailImgList :listData="infoData.honor_img" title="证书" />
    </template>
    <DetailImgList
      v-else-if="infoData.type === 4"
      :listData="infoData.prove_img"
      title="相关证明资料"
    />
    <DetailImgList
      v-else-if="infoData.type === 3"
      :listData="infoData.card_pics"
      title="上传身份证件"
    />

    <view class="detail-remark" v-if="infoData.remark">
      <view class="detail-remark-title">
        <EditMenuTitle title="补充说明" />
      </view>
      <view class="detail-remark-content">
        <view class="detail-remark-text">{{ infoData.remark }}</view>
      </view>
    </view>
  </template>

  <template v-if="infoData.status === 1 || infoData.status === 2">
    <view style="height: 120rpx"></view>
    <view class="detail-btn">
      <view @click="editClick">
        <FormButton>修改信息</FormButton>
      </view>
    </view>
  </template>
</template>

<style lang="scss">
page {
  background-color: #ffffff;
}

.detail-tab {
  display: flex;
  align-items: center;
  height: 88rpx;
  padding-left: 30rpx;
  background-color: #f8f8f8;

  .detail-tab-item {
    margin-right: 60rpx;
  }
}

.detail-empty {
  padding-top: 200rpx;

  .detail-empty-img {
    display: block;
    width: 560rpx;
    height: 282rpx;
    margin: 0 auto 40rpx;
  }

  .detail-empty-tip {
    margin-bottom: 60rpx;
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
    text-align: center;
  }

  .detail-empty-btn {
    width: 356rpx;
    margin: 0 auto;
    font-size: 30rpx;
    color: #ffffff;
    line-height: 86rpx;
    text-align: center;
    font-weight: bold;
    border-radius: 66rpx;
    background-color: #ff7900;
  }
}

.detail-state {
  padding-top: 40rpx;
  padding-bottom: 28rpx;
  margin: 0 30rpx 54rpx;
  border-bottom: 2rpx solid #dddddd;

  .detail-state-label,
  .detail-state-label2 {
    flex-shrink: 0;
    font-size: 30rpx;
    color: #666666;
    line-height: 42rpx;
  }

  .detail-state-value {
    padding: 0 18rpx;
    margin-left: 30rpx;
    font-size: 24rpx;
    color: #ffffff;
    line-height: 54rpx;
    border-radius: 12rpx;
  }

  .detail-state-item,
  .detail-state-item2 {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
  }

  .detail-state-label2,
  .detail-state-reason {
    font-size: 28rpx;
    color: #ff4d42;
    line-height: 40rpx;
  }

  .detail-state-reason,
  .detail-state-identity {
    flex-grow: 1;
    min-width: 0;
    color: #666666;
  }

  .detail-state-item2 {
    padding-top: 40rpx;
    margin-top: 28rpx;
    border-top: 2rpx solid #dddddd;
  }

  .detail-state-identity {
    margin-left: 30rpx;
    font-size: 30rpx;
    color: #333333;
    line-height: 42rpx;
  }
}

.detail-info {
  margin-bottom: 34rpx;

  .detail-info-title {
    padding-left: 30rpx;
  }

  .detail-info-item {
    display: flex;
    align-items: center;
    min-height: 72rpx;
    padding: 14rpx 60rpx 14rpx 30rpx;
  }

  .detail-info-label {
    flex-shrink: 0;
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
  }

  .detail-info-content {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-grow: 1;
    min-width: 0;
    margin-left: 20rpx;
  }

  .detail-info-avatar {
    width: 76rpx;
    height: 76rpx;
    border-radius: 50%;
  }

  .detail-info-line {
    margin: 0 30rpx;
    border-bottom: 2rpx solid #dddddd;
  }

  .detail-info-value {
    min-width: 0;
    font-size: 30rpx;
    color: #333333;
    line-height: 42rpx;
    text-align: right;
    word-break: break-all;
  }
}

.detail-certificate {
  padding-top: 34rpx;
  padding-bottom: 1rpx;
  margin-top: -36rpx;
  border-top: 20rpx solid #f6f6f6;

  .detail-certificate-title {
    padding-left: 30rpx;
    margin-bottom: 34rpx;
  }

  .detail-certificate-wrapper {
    margin-bottom: 20rpx;
  }
}

.detail-remark {
  .detail-remark-title {
    padding-left: 30rpx;
  }

  .detail-remark-content {
    padding: 40rpx 30rpx;
  }

  .detail-remark-text {
    padding: 30rpx;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    border-radius: 20rpx;
    background-color: #f9f9f9;
  }
}

.detail-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 106rpx;
  padding: 14rpx 60rpx env(safe-area-inset-bottom);
  background-color: #ffffff;
}
</style>